<template>
  <div class="menu-container">
      <template v-for="(item,index) in menuArr">
        <div :key="index" :class="[item.router, {'active': index === menuID}]" v-if="item.show" @click="go(index, item)">
            {{ item.name }}
        </div>
      </template>
  </div>
</template>

<script>
import config from '@/defaultSettings'
export default {
  name: 'LoginMenu',
  props: {

  },
  data () {
    return {
        menuArr: config.systemArr,
        menuID: -1
    }
  },
  created () {

  },
  mounted() {
    this.initData()
  },
  watch:{
    "$route":function(to,from){
      this.initData()
    }
  },
  methods: {
    initData() {
      const routerName = this.$route.params.systemName
      this.menuID = this.menuArr.findIndex(item => item.router === routerName)
    },
   go(index, item) {
     // 点击当前页不跳转
     if (this.menuID === index) return

      this.$router.push({ path: '/login/' + item.router })
   }
  }
}
</script>

<style lang="less" scoped>
  .menu-container{
      &>div {
          height: 8.9vh;
          line-height: 8.9vh;
          width: 150px;
          box-sizing: border-box;
          border-bottom: #315a8a 1px solid;
          font-size: 16px;
          color: #ffffff;
          cursor: pointer;
          padding-left: 45px;
          transition: all .3s;

          &:last-of-type {
            border-bottom: none;
          }

          &:hover {
              color: #00a8ba;
          }

          &.bigDataVisualization {
            background: url('~@/assets/login/bigDataVisualization.png') no-repeat left center / 25px 25px;

            &:hover, &.active {
                color: #00a8ba;
                background: url('~@/assets/login/bigDataVisualization-active.png') no-repeat left center / 25px 25px;
            }
          }

          &.officeAutomation {
            background: url('~@/assets/login/officeAutomation.png') no-repeat left center / 25px 25px;

            &:hover, &.active {
              color: #00a8ba;
              background: url('~@/assets/login/officeAutomation-active.png') no-repeat left center / 25px 25px;
            }
          }

          &.eventFlow {
            background: url('~@/assets/login/eventFlow.png') no-repeat left center / 25px 25px;

            &:hover, &.active {
              color: #00a8ba;
              background: url('~@/assets/login/eventFlow-active.png') no-repeat left center / 25px 25px;
            }
          }

          &.unifiedUserManagement {
            background: url('~@/assets/login/unifiedUserManagement.png') no-repeat left center / 25px 25px;

            &:hover, &.active {
              color: #00a8ba;
              background: url('~@/assets/login/unifiedUserManagement-active.png') no-repeat left center / 25px 25px;
            }
          }

          &.mapIntegration {
            background: url('~@/assets/login/mapIntegration.png') no-repeat left center / 25px 25px;

            &:hover, &.active {
              color: #00a8ba;
              background: url('~@/assets/login/mapIntegration-active.png') no-repeat left center / 25px 25px;
            }
          }

          &.leaderCockpit {
            background: url('~@/assets/login/leaderCockpit.png') no-repeat left center / 25px 25px;

            &:hover, &.active {
              color: #00a8ba;
              background: url('~@/assets/login/leaderCockpit-active.png') no-repeat left center / 25px 25px;
            }
          }
      }
  }
</style>
